<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="用户名称:">
        <el-input v-model="queryParams.username" placeholder="请输入用户名称" />
      </el-form-item>
      <el-form-item label="地点:">
        <el-input v-model="queryParams.location" placeholder="请输入登录地址" />
      </el-form-item>
      <el-form-item label="登录时间:">
        <el-date-picker
          v-model="dateRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="登录状态:">
        <el-select v-model="queryParams.status" placeholder="请选择登录状态">
          <el-option
            v-for="item in statusOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery('1')">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="handleQuery('reset')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb5">
      <el-col :span="1.5"><el-button type="danger" :disabled="multiple" icon="el-icon-delete" @click="handleDelete(null)">删除</el-button></el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" />

      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="URL">
              <span>{{ props.row.url }}</span>
            </el-form-item>
            <el-form-item label="操作方法">
              <span>{{ props.row.method }}</span>
            </el-form-item>
            <el-form-item label="请求参数">
              <span>{{ props.row.params }}</span>
            </el-form-item>
            <el-form-item label="返回消息">
              <span>{{ props.row.returnMessage }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column prop="title" label="模块" min-width="80px" />
      <el-table-column prop="operator" label="操作人" min-width="80px" />
      <el-table-column prop="operationType" label="操作类型" :formatter="handleOperationType" min-width="80px" />
      <el-table-column prop="requestMethod" label="请求方式" min-width="80px" />
      <el-table-column prop="ip" label="IP地址" min-width="85px" />
      <el-table-column prop="location" label="操作地点" min-width="80px" />
      <el-table-column prop="status" label="操作状态" min-width="70px">
        <template slot-scope="scope">
          <el-tag :type="handleStatusColor(scope.row.status)">{{ handleStatusText(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="cost" label="请求耗时" min-width="80px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.cost===null">＜1ms</el-tag>
          <el-tag v-else-if="scope.row.cost<=300">{{ scope.row.cost }}ms</el-tag>
          <el-tag v-else-if="scope.row.cost<=1000" type="warning">{{ scope.row.cost }}ms</el-tag>
          <el-tag v-else type="danger">{{ scope.row.cost }}ms</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="登录日期" min-width="110px" />
      <el-table-column label="操作" min-width="60px">
        <template slot-scope="scope">
          <el-button type="text" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="handleQuery" />

  </div>
</template>

<script>
import initData from '@/mixins/initData'

export default {
  mixins: [initData],
  data() {
    return {
      statusOptions: [],
      operationTypeOptions: [],
      showTypeOptions: [],
      queryParams: {
        username: undefined,
        location: undefined,
        status: undefined
      }
    }
  },
  mounted() {
    this.handleQuery()
    this.getDict('success_status').then(res => {
      this.statusOptions = res.data
    })
    this.getDict('operationType').then(res => {
      this.operationTypeOptions = res.data
    })
    this.getDict('show_type').then(res => {
      this.showTypeOptions = res.data
    })
  },
  methods: {
    beforeInit() {
      this.base = '/log/operationLog'
    },
    handleStatus(value) {
      // this.getDict('success_status').then(res => {
      //   this.statusOptions = res.data
      //   if (!value) return ''
      //   value = this.statusOptions.find(item => {
      //     item.dictValue === value ? item.dictLabel : value
      //   })
      //   console.log(value)
      // })
      return value
    },
    handleOperationType(row) {
      return this.selectDictLabel(this.operationTypeOptions, row.operationType)
    },
    handleStatusText(column) {
      return this.selectDictLabel(this.statusOptions, column)
    },
    handleStatusColor(column) {
      return this.selectShowTypeByDictInfo(this.showTypeOptions, column)
    },
  }
}

</script>

<style lang="scss" scoped>
  .demo-table-expand .el-form-item {
    margin-bottom: 0;
    width: 100%;
  }
</style>
